<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Flexbox Page</title>
    <link rel="stylesheet" href="caogao1.css">
</head>

<body>
    <div class="banner ma" id="pics">
        <div id="xyd" class="yuandian">
            <div class=" yuandian1 fl"></div>
            <div class=" yuandian2 fl"></div>
            <div class=" yuandian2 fl"></div>
            <div class=" yuandian2 fl"></div>
            <div class=" yuandian2 fl"></div>
        </div>
        <ul>
            <li><a href=""><img class="img01" src="../demo2/lun1.webp"></a></li>
            <li><a href=""><img class="img01" src="../demo2/lun2.webp"></a></li>
            <li><a href=""><img class="img01" src="../demo2/lun3.webp"></a></li>
            <li><a href=""><img class="img01" src="../demo2/lun4.webp"></a></li>
            <li><a href=""><img class="img01" src="../demo2/lun2.webp"></a></li>
        </ul>
    </div>

    <script>
        var pics = document.getElementById("pics");
        var yuandians = pics.getElementsByClassName("fl");
        var a = pics.getElementsByTagName("a");
        var currentIndex = 0; // 当前显示的图片的索引

        // 切换图片和圆点的函数
        function switchPic() {
            currentIndex++;
            if (currentIndex >= a.length) {
                currentIndex = 0;
            }
            for (var j = 0; j < yuandians.length; j++) {
                yuandians[j].style.backgroundColor = "#ffffff";
                a[j].style.display = "none";
            }
            yuandians[currentIndex].style.backgroundColor = "red";
            a[currentIndex].style.display = "block";
        }

        // 自动轮播
        var intervalId = setInterval(switchPic, 1000);

        // 点击圆点切换图片和圆点
        for (var i = 0; i < yuandians.length; i++) {
            yuandians[i].index = i;
            yuandians[i].onmouseover = function () {
                clearInterval(intervalId); // 清除之前的定时器
                currentIndex = this.index;
                for (var j = 0; j < yuandians.length; j++) {
                    yuandians[j].style.backgroundColor = "#ffffff";
                    a[j].style.display = "none";
                }
                this.style.backgroundColor = "#777170";
                a[currentIndex].style.display = "block";
            }
            yuandians[i].onmouseout = function () {
                intervalId = setInterval(switchPic, 2000); // 重新设置定时器
            }
        }
    </script>
</body>

</html>